<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

<!--bootstrap不支持ie的兼容模式，所以这行代码是让ie运行最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--初始化移动浏览显示，viewport可以控制网页的大小 initial-scale表示设置缩放的比例，1的话为不缩放
    让视口的宽度等于初始的设备的宽度，缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- 载入bootstrap的css文件  css文件要放到head中，js文件放到body的最下面 -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
   <!--低于ie9的 要加入这两句话，对媒体查询进行支持-->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>

<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists.</p>

<ul>
    <li>无序列表信息1</li>
    <li>无序列表信息2</li>
</ul>
<ol>
    <li>有序列表信息1</li>
    <li>有序列表信息2</li>
</ol>
<dl>
    <dt>定义列表标题</dt>
    <dd>定义列表信息1</dd>
</dl>
<hr/>
<h5>普通列表</h5>
<ul>
    <li>列表项目</li>
    <li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
    <li>项目列表一</li>
    <li>项目列表二</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
    <li>有序列表</li>
    <li>
        有序列表
        <ol>
            <li>有序列表(2)</li>
            <li>有序列表(2)</li>
        </ol>
    </li>
    <li>有序列表</li>
</ol>
<li>
    项目列表
    <ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
    </ul>
</li>
<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl>
<hr/>
<code>
    使用code来显示单行内联代码  使用code来显示单行内联代码
    使用code来显示单行内联代码  使用code来显示单行内联代码
    使用code来显示单行内联代码  使用code来显示单行内联代码
</code>
<pre>
    使用pre来显示多行块代码  使用pre来显示多行块代码
       使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
</pre>
<pre class="pre-scrollable">
    元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，
    而且不想让其占有太大的页面篇幅，就想控制代码块的大小。
    Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，
    就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

    使用pre来显示多行块代码  使用pre来显示多行块代码
       使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
         使用pre来显示多行块代码  使用pre来显示多行块代码
</pre>
<kbd>使用kbd来显示用户输入代码 使用kbd来显示用户输入代码使用kbd来显示用户输入代码</kbd>
<hr/>

<table class="table table-striped table-bordered table-hover">
    <!--table为告诉表格，table-striped为实现斑马线一行隔一行加灰，table-bordered为加上边框，table-hover为悬停在百色的地方的话，会加灰 -->
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <td>表格单元格table-responsive</td>
            <td>表格单元格table-responsive</td>
            <td>表格单元格table-responsive</td>
        </tr>
        <tr>
            <td>表格单元格table-responsive</td>
            <td>表格单元格table-responsive</td>
            <td>表格单元格table-responsive</td>
        </tr>
    </table>
</div>
    <table class="table table-bordered table-condensed">
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
    </table>
<script src="../../../js/jquery-2.1.1.js"></script>
<script src="../../../js/bootstrap.min.js"></script>
<!--同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</body>
</html>